<template>
    <div class="ambient_add_menu">
        <div class="ambient_add_menu_item" v-for="item in state.menuList"
            :class="item.active ? 'ambient_add_menu_item_active' : ''" :key="item.value"
            @click="store.clickmenu(item)">
            <div>{{ item.label }}</div>
        </div>
    </div>
</template>

<script setup>

const { store, state } = inject('storejs')

</script>

<style lang="scss" scoped>
.ambient_add_menu {
    width: 105px;
    height: 100%;
    margin-right: 24px;
    display: flex;
    flex-direction: column;

    .ambient_add_menu_item {
        height: 30px;
        border-left: 2px solid #e5e6eb;
        display: flex;
        align-items: center;

        div {
            display: flex;
            align-items: center;
            padding: 16px;
            height: 22px;
            color: #4e5969;
            font-size: 14px;
            cursor: pointer;
        }
    }

    .ambient_add_menu_item_active {
        border-left: 2px solid #3569fd;

        div {
            color: #1d2129;
            font-weight: 600;
        }
    }
}
</style>